<template>
	<view class="vip-container">
		<CommonBack title="VIP会员"  @back="back"></CommonBack>
		<!-- 个人信息 -->
		<view class="user-info">
			<!-- 标志 -->
			<view class="bz c-theme-btn-w"></view>
			<view class="user">
				<view class="name">
					<text style="font-size: 36rpx;font-weight: 800;color: #3D5464;">ZhangRuoqi</text>
					<text style="font-size: 28rpx;color: #71818C;">您还不是会员，开通立享 7 项特权</text>
				</view>
			</view>
		</view>
		<view class="vip-info">
			<view class="info-item c-theme-btn-w">
				<image src="../../static/imgs/vip.png" mode="" style="width: 66rpx;height: 66rpx;"></image>
				<view class="info-name">月卡会员</view>
				<view class="info-price">￥25</view>
			</view>
			<view class="info-item c-theme-btn-w">
				<image src="../../static/imgs/vip.png" mode="" style="width: 66rpx;height: 66rpx;"></image>
				<view class="info-name">季卡会员</view>
				<view class="info-price">￥68</view>
			</view>
			<view class="info-item c-theme-btn-w">
				<image src="../../static/imgs/vip.png" mode="" style="width: 66rpx;height: 66rpx;"></image>
				<view class="info-name">年卡会员</view>
				<view class="info-price">￥248</view>
			</view>
		</view>
		<CommonNav name="会员权益" style="margin-bottom: 40rpx;"></CommonNav>
		<view class="qy-warp">
			<view class="qy-item" v-for="item in qyList" :key="item.img">
				<image :src="item.img" mode=""></image>
				<view class="qy-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 立即开通 -->
		<view class="kt">
			<u-button shape="circle" color="#3F7BED">立即开通</u-button>
		</view>
		<!-- 协议 -->
		<view class="xy">
			<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
				<u-radio :customStyle="{marginBottom: '8px'}" label="" name="" @change="radioChange">
				</u-radio>
			</u-radio-group>
			<text>已阅读并同意<text style="color: #007AFF;">《会员服务协议》</text>和<text
					style="color: #007AFF;">《自动续费协议》</text></text>
		</view>
		<view class="notice">
			<text>注：开通连续订阅服务后，账户会从成功开通当日起，每隔一个扣款周期自动扣款以顺延对应时长的会员。如需取消连续订阅服务，需在扣款周期前至少24小时，前往手机系统“设置 - 订阅”中取消即可。</text>
		</view>
	</view>
</template>

<script>
	import CommonBack from "@/components/CommonBack.vue"
	import CommonNav from "@/components/CommonNav.vue"
	export default {
		components: {
			CommonBack,
			CommonNav
		},
		data() {
			return {
				qyList: [{
						name: "会员标识",
						img: "../../static/imgs/vip1.png"
					},
					{
						name: "移除广告",
						img: "../../static/imgs/vip2.png"
					},
					{
						name: "任选卷包",
						img: "../../static/imgs/vip3.png"
					},
					{
						name: "超级会员日",
						img: "../../static/imgs/vip4.png"
					},
					{
						name: "免费直播课",
						img: "../../static/imgs/vip5.png"
					},
					{
						name: "尊享会员价",
						img: "../../static/imgs/vip6.png"
					},
					{
						name: "专属客户",
						img: "../../static/imgs/vip7.png"
					},
					{
						name: "更多服务",
						img: "../../static/imgs/vip8.png"
					},
				],
				radiovalue1: "",

			};
		},
		methods:{
			back(){
				uni.switchTab({
					url: "../index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vip-container {
		padding: 100rpx 60rpx;

		.user-info {
			display: flex;
			align-items: center;
			margin: 60rpx 0;

			.bz {
				width: 80rpx;
				height: 80rpx;
				border: 1px solid #FFFFFF;
				box-shadow: -10rpx -10rpx 20rpx 2rpx rgba(255, 255, 255, 0.6), inset 10rpx 10rpx 10rpx 2rpx rgba(61, 84, 100, 0.10196078431372549);
				background: #3F7BED;
				border-radius: 50%;
			}

			.user {
				margin-left: 20rpx;

				.name {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
			}
		}

		.vip-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 60rpx 0;

			.info-item {
				padding: 30rpx 46rpx;
				box-shadow: -10rpx -10rpx 20rpx 2rpx rgba(255, 255, 255, 1), inset 10rpx 10rpx 10rpx 2rpx rgba(255, 255, 255, 0.4);
				background: #F4F6F8;
				border: 2rpx solid #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.info-name {
					font-size: 28rpx;
					font-weight: 800;
					color: #3D5464;
				}

				.info-price {

					color: #FFB300;
					font-weight: 800;
					font-size: 28rpx;
				}
			}
		}

		.qy-warp {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.qy-item {
				width: 120rpx;
				margin-bottom: 30rpx;
				padding: 26rpx 40rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
				background: #F4F6F8;
				margin-right: 12rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.qy-name {
					font-size: 20rpx;
					color: #3D5464;
				}
			}
		}

		.xy {
			display: flex;
			margin: 20rpx 0;

			text {
				flex: 14;
				font-size: 26rpx;
				color: #999FAD;
			}

		}

		.notice {
			font-size: 20rpx;

			color: #999FAD;
		}
	}
</style>
